<template>
  <div class="main">
    <h3 @click="back">&nbsp; 服务列表</h3>
    <div class="left">
      <div>
        <ul>
          <router-link :to="{ name: 'wash' }" tag="li">保洁清洗</router-link>
          <router-link :to="{ name: 'care' }" tag="li">保洁月嫂</router-link>
          <router-link :to="{ name: 'pipe' }" tag="li">管道疏通</router-link>
          <router-link :to="{ name: 'appliances' }" tag="li"
            >家电修装</router-link
          >
        </ul>
      </div>
    </div>

    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scope>
h3 {
  margin-top: 8px;
  margin-left: 15px;
  margin-bottom: 5px;
  color: #000;
}
/* .active {
  background-color: rgb(245, 242, 242);
  color: #000;
  border-left: 2px solid #64b587;
} */
.main {
  height: 500px;
  font-size: 15px;
  color: #999;
}
.left {
  float: left;
  width: 100px;
  height: 100%;
  text-align: center;
  /* background-color: rgb(245, 242, 242); */
}

.left ul li {
  box-sizing: border-box;
  width: 100px;
  padding: 15px;
}

.right {
  height: 100%;
  margin-left: 100px;
}

.router-link-exact-active {
  /* background-color: #fff; */
  background-color: rgb(245, 242, 242);

  color: #000;
  border-left: 2px solid #64b587;
}
</style>

<script>
export default {
  data() {
    return {
      dataList: null,
    };
  },
  methods: {
    handleClick(e) {
      let li = document.getElementsByTagName("li");
      li.forEach(element => {
        element.className = "";
      });
      e.target.className = "active";
    },
    back() {
      this.$router.push({ name: "HomaePage" });
    },
  },
};
</script>